<template>
  <div class="home_page">
    <!-- <h1>当前时间: {{ currentTime.toLocaleTimeString() }}</h1> -->
    <div class="hello">{{ timePeriod }}好，小王</div>
    <div class="calder">
      <div>
        <!-- <h1>当前时间: {{ currentTime.toLocaleTimeString() }}</h1> -->
        <div class="time"><timedisplay /></div>
        <div class="reserve">
          <div>
            <div>
              <div>{{ proNumber }}</div>
              <div @click="copyToClipboard">
                <svg
                  t="1736690206792"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4284"
                  width="256"
                  height="256"
                >
                  <path
                    d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z"
                    p-id="4285"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z"
                    p-id="4286"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z"
                    p-id="4287"
                    fill="#8a8a8a"
                  ></path>
                </svg>
              </div>
            </div>
            <div>
              <div>12:30</div>
              <div>---></div>
              <div>14:00</div>
              <div>名斗科技楼302实验室</div>
            </div>
          </div>
          <div>
            <div>
              <div>{{ proNumber }}</div>
              <div @click="copyToClipboard">
                <svg
                  t="1736690206792"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4284"
                  width="256"
                  height="256"
                >
                  <path
                    d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z"
                    p-id="4285"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z"
                    p-id="4286"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z"
                    p-id="4287"
                    fill="#8a8a8a"
                  ></path>
                </svg>
              </div>
            </div>
            <div>
              <div>12:30</div>
              <div>---></div>
              <div>14:00</div>
              <div>名斗科技楼302实验室</div>
            </div>
          </div>
          <div>
            <div>
              <div>{{ proNumber }}</div>
              <div @click="copyToClipboard">
                <svg
                  t="1736690206792"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4284"
                  width="256"
                  height="256"
                >
                  <path
                    d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z"
                    p-id="4285"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z"
                    p-id="4286"
                    fill="#8a8a8a"
                  ></path>
                  <path
                    d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z"
                    p-id="4287"
                    fill="#8a8a8a"
                  ></path>
                </svg>
              </div>
            </div>
            <div>
              <div>12:30</div>
              <div>---></div>
              <div>14:00</div>
              <div>名斗科技楼302实验室</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <calender />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import calender from "../../../../components/pages/home/calender/index.vue";
import timedisplay from "../../../../components/pages/home/timedisplay/index.vue";
import { success } from "../../../../utils/message/index";
const proNumber = ref("12312313");
// 定义当前时间
const currentTime = ref(new Date());
import { useClipboard } from "@vueuse/core";
const { copy } = useClipboard();
const copyToClipboard = async () => {
  console.log("开始准备复制了");
  await copy(proNumber.value);
  success("已复制在剪贴板");
};

// 计算属性：根据当前时间判断时间段
const timePeriod = computed(() => {
  const now = currentTime.value;
  const hours = now.getHours();

  if ((hours >= 0 && hours < 5) || hours > 23) {
    return "凌晨";
  } else if (hours >= 5 && hours < 10) {
    return "早上";
  } else if (hours >= 10 && hours < 15) {
    return "中午";
  } else if (hours >= 15 && hours < 18) {
    return "下午";
  } else {
    return "晚上";
  }
});

// 更新时间的方法
const updateTime = () => {
  currentTime.value = new Date();
};
let timer: string | number | NodeJS.Timeout | null | undefined = null;
// 在组件挂载时更新当前时间
onMounted(() => {
  // 定时器

  // 初始更新当前时间
  currentTime.value = new Date();
  // 设置定时器，每分钟更新一次时间
  timer = setInterval(updateTime, 60000);
});

// 在组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
.home_page {
  width: 100%;
  height: 100%;
  .hello {
    font-size: 30px;
  }
  .calder {
    width: 100%;
    height: 90%;
    display: flex;
    > div:nth-child(1) {
      box-sizing: border-box;
      padding: 40px 20px 45px 20px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .time {
        margin: 0 auto;
      }
      .reserve {
        width: 100%;
        margin-top: 40px;
        // min-height: 100px;
        // max-height: 300px;
        height: 270px;
        border-radius: 10px;
        overflow: scroll;
        border: 1px solid rgba($color: #5a5a5a, $alpha: 0.5);
        > div {
          width: 100%;
          display: flex;
          padding: 10px;
          box-sizing: border-box;
          flex-direction: column;
          > div:nth-child(1) {
            width: 100%;
            height: 30px;
            border: 1px solid rgba($color: #5a5a5a, $alpha: 0.2);
            display: flex;
            box-sizing: border-box;
            justify-content: space-between;
            padding: 5px;

            > div {
              display: inline-block;
              height: 20px;
              line-height: 20px;
              svg {
                width: 20px;
                height: 20px;
              }
            }
            > div:nth-child(2) {
              margin-left: 10px;
            }
          }
          > div:nth-child(2) {
            width: 100%;
            height: 100px;
            border: 1px solid rgba($color: #5a5a5a, $alpha: 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            > div {
              font-weight: 900;
              font-size: 30px;
              margin: 0 10px;
            }
            > div:nth-child(4) {
              display: inline-block;
              position: absolute;
              width: 150px;
              font-size: 12px;
              font-weight: 400;
              text-align: center;
              bottom: 10px;
            }
          }
        }
      }
      /* 隐藏滚动条 */
      .reserve::-webkit-scrollbar {
        display: none; /* Chrome, Safari 和 Opera */
      }

      /* Firefox */
      .reserve {
        scrollbar-width: none; /* Firefox */
      }
    }
    > div {
      justify-content: space-between;
      width: 50%;
      box-sizing: border-box;
      &:nth-child(2) {
        padding: 80px 60px 50px 0px;
      }
    }
  }
}
</style>
